<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="SiYuan">
    <link href="./img/favicon.ico" rel="icon">
    <meta name="description" content="MemoTrace——一款强大的微信聊天记录管理工具">
    <title>微信年度聊天报告</title>
    
    <link rel="stylesheet" href="./static/css/style.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="./static/css/fullpage.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="./static/js/fullpage.min.js"></script>
</head>
<body>
    <div id="snow"></div>
    <!-- Your content goes here -->
<div id="fullpage">
    <div class="section">
        <div>
            <img class="Mountain-Image" src="./static/img/雪山背景.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="./static/img/彩灯1.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="./static/img/彩灯2.png" alt="Bottom Right Light">
            <img src="./static/img/圣诞树1.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="./static/img/雪人3.png" alt="Right Top Image" class="corner-image right-bottom">
            
        <div class="center-container">
            <div>
                <img src="./static/img/窗雪.png">
            </div>
            <div class="user-container">
                <div class="user">
                    <img class="avatar" src="./static/img/tahead.png">
                  <span class="nickname">梁山伯</span>
                </div>
        
                <img src="./static/img/铃铛.png" alt="Right Top Image" class="spliter-img">
                <div class="user">
                    <img class="avatar" src="./static/img/myhead.png">
                  <span class="nickname">祝英台</span>
                </div>
            </div>
            <div>
                <p class="mt-3">我们第一次聊天在</p>
                <p id="first_time" class="first-time">2013-10-25 16:32:10</p>
                <p class="mt-3">距今已有</p>
                <div class="mt-3">
                    <span id="t_d"></span>
                    <span id="t_h"></span>
                    <span id="t_m"></span>
                    <span id="t_s"></span>
                </div>
            </div>
            <!-- <div>
                <img src="img/雪人.gif">
            </div>
            <div>
                <img src="img/雪人1.gif">
            </div> -->
        </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="./static/img/雪山背景.png" alt="Mountain Image">
            <img class="corner-light light-top-left" src="./static/img/彩灯1.png" alt="Top Left Light">
            <img class="corner-light light-top-right" src="./static/img/彩灯2.png" alt="Bottom Right Light">
            <img src="./static/img/1.png" alt="礼袋" class="corner-image left-bottom-gift">
            <img src="./static/img/圣诞老人.png" alt="圣诞老人" class="corner-image right-bottom-oldman">
        </div>
        <div class="wordcloud">
            <div id="word_cloud" class="chart-container"></div>
        </div>
        <div class="keyword-container">
            <div class="tp1">二〇二三</div>
            <div class="tp1">你们说的最多的是</div>
            <div class="keyword">“喜欢”<span class="keyword-num">595</span><span class="tp1">次</span></div>
            <!-- <img src="./static/img/窗雪.png"> -->
        </div>
        <div class="dialog-container">
            <div class="item item-center">2023-10-20 15:60</div>
            <div class="item item-right">
                <div class="bubble bubble-right">我就是<span style="color:red">喜欢</span>大城市</div>
                <img class="bubble-avatar" src="./static/img/myhead.png">
            </div>
            <div class="item item-left">
                <img class="bubble-avatar" src="./static/img/tahead.png">
                <div class="bubble bubble-left">很繁华</div>
            </div>
            <div class="item item-center">2023-10-20 15:60</div>
            <div class="item item-right">
                <div class="bubble bubble-right">也不知道你为啥不<span style="color:red">喜欢</span></div>
                <img class="bubble-avatar" src="./static/img/myhead.png">
            </div>
            <div class="item item-left">
                <img class="bubble-avatar" src="./static/img/tahead.png">
                <div class="bubble bubble-left">也没有吧</div>
            </div>
            <div class="item item-center">2023-10-20 15:60</div>
            <div class="item item-right">
                <div class="bubble bubble-right">我就是<span style="color:red">喜欢</span>吃火锅呀</div>
                <img class="bubble-avatar" src="./static/img/myhead.png">
            </div>
            <div class="item item-left">
                <img class="bubble-avatar" src="./static/img/tahead.png">
                <div class="bubble bubble-left">我也喜欢</div>
            </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="./static/img/雪山背景.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="./static/img/彩灯1.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="./static/img/彩灯2.png" alt="Bottom Right Light">
            <img src="./static/img/雪屋.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="./static/img/雪人.gif" alt="Right Top Image" class="corner-image right-bottom" style="max-height: 500px;">
            <img src="./static/img/圣诞老人3.png" alt="圣诞老人" class="center-top-time">
            <img src="./static/img/平安夜.png" alt="Right Top Image" class="left-time">
            <div class="time-container">
                <div class="text112">2023-09-12 15:20:30</div>
                <div class="text112">这么晚了你们还在聊天</div>
                <div class="text112">那天一定有你们<span style="color: brown;">难忘的回忆</span>吧</div>
                <div><br></div>
                <div class="text112">你们都是<span style="color: brown;">夜猫子</span></div>
                <div class="text113">凌晨01:00</div>
                <div class="text112">你们一共发送了<span style="color: brown;">8450</span>条消息</div>
            </div>
            <div class="parent">
                <div class="dialog-container-time">
                    <div class="item item-center">2022-03-12 04:38:10</div>
                    <div class="item item-right">
                        <div class="bubble bubble-right">无语了，我这大晚上干嘛不睡觉</div>
                        <img class="bubble-avatar" src="./static/img/tahead.png">
                    </div>
                    <div class="item item-left">
                        <img class="bubble-avatar" src="./static/img/myhead.png">
                        <div class="bubble bubble-left">嘿嘿，我也没睡</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div>
            <img class="Mountain-Image" src="./static/img/雪山背景.png" alt="Mountain Image">
            <img class="corner-light light-top-left txt" src="./static/img/彩灯1.png" alt="Top Left Light">
            <img class="corner-light light-top-right txt" src="./static/img/彩灯2.png" alt="Bottom Right Light">
            <img src="./static/img/雪屋1.png" alt="Left Bottom Image" class="corner-image left-bottom">
            <img src="./static/img/滑雪的小女孩.png" alt="滑雪的小女孩" class="corner-image right-bottom">
            <img src="./static/img/舞狮.png" alt="Right Top Image" class="snow-ball">
            <img src="./static/img/礼盒1.png" alt="Right Top Image" class="ttq">
            <div class="time-container">
                <div class="text112">过去的一年里</div>
                <div class="text112">你们一共发送了<span style="color: brown;">91835</span>条消息</div>
                <div class="text112">总计<span style="color: brown;">388161</span>字</div>
                <div><br></div>
                <div class="text112">你们的聊天似乎没有规律</div>
                <div class="text112">
                    <span style="color: brown;">八月份</span>
                    一共发送了
                    <span style="color: brown;">11629</span>
                    条消息
                </div>
                <div class="text112">对你的话说不完</div>
                <div><br></div>
                <div class="text112">
                    <span style="color: brown;">六月份</span>
                    只有
                    <span style="color: brown;">2139</span>
                    条消息
                </div>
                <div class="text112">有时候你们也想静静</div>
            </div>
        </div>
    </div>
    <div class="section">
            <div>
                <img class="Mountain-Image" src="./static/img/雪山背景.png" alt="Mountain Image">
                <img class="corner-light light-top-left txt" src="./static/img/彩灯1.png" alt="Top Left Light">
                <img class="corner-light light-top-right txt" src="./static/img/彩灯2.png" alt="Bottom Right Light">
                <img src="./static/img/包饺子.png" alt="包饺子" class="corner-image left-bottom">
                <img src="./static/img/柿子.png" alt="Right Top Image" class="corner-image right-bottom">
                <div class="calendar-container">
                    <div class="text012">2022年</div>
                    <div class="text012">
                        我们有
                        <span style="color: brown;">230</span>
                        天在聊天
                    </div>
                    <div class="text012">有你在的日子里</div>
                    <div class="text012">
                        都很有
                        <span style="color: brown;">意义</span>！
                    </div>
                    <div><br></div>
                    <div class="text012">这一年</div>
                    <div class="text012">
                        一共发送了
                        <span style="color: brown;">3454</span>
                        个表情包
                    </div>
                    <div class="text012">Ta最常用的表情包是</div>
                    <img src="./static/img/th_ec75d9cbe5972ca19afbc232d38e2414.gif" class="emoji">
                    <div class="text012">
                        一共
                        <span style="color: brown;">184</span>次
                    </div>
                </div>
                <div id="calendar-chart" class="calendar-chart"></div>
            </div>
    </div>
    <div class="section">
        <h1 style="text-align: center;">敬请期待</h1>
    </div>
    <!-- Add more sections as needed -->
</div>


<script>
    // JavaScript 代码用于生成聊天内容和雪花动画
    document.addEventListener('DOMContentLoaded', function () {
        const snowContainer = document.getElementById('snow');
        // 生成雪花动画
        for (let i = 0; i < 50; i++) {
            const snowflake = document.createElement('div');
            snowflake.className = 'snowflake';
            var ran = Math.random();
            var ran0 = 1-ran;
            snowflake.style.left = `${Math.random() * 150}vw`;
            snowflake.style.animationDuration = `${ran0  * 20 + 7}s`;
            snowflake.style.setProperty('--animation-order', i);

            // 设置雪花的随机大小
            const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            snowContainer.appendChild(snowflake);
        }
    });
    function createSnowflake(top, left) {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake0';
      snowflake.style.top = `${top}vh`;
      snowflake.style.left = `${left}vw`;
      // 设置雪花的随机大小
      const size = Math.random() * 20 + 10; // 随机大小在 10 到 30 之间
        snowflake.style.width = `${size}px`;
        snowflake.style.height = `${size}px`;
      document.body.appendChild(snowflake);
    }
</script>
<script>
    var chart_f2411bf4425d4ac9b2e83df1a4fa982f = echarts.init(
        document.getElementById('word_cloud'), 'white', {renderer: 'canvas'});
    var option_f2411bf4425d4ac9b2e83df1a4fa982f = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"aria": {
    "enabled": false
},
"color": [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc"
],
"series": [
    {
        "type": "wordCloud",
        "name": "\u804a\u5929\u6587\u5b57",
        "shape": "circle",
        "rotationRange": [
            -90,
            90
        ],
        "rotationStep": 45,
        "girdSize": 20,
        "sizeRange": [
            10,
            40
        ],
        "data": [
            {
                "name": "\u559c\u6b22",
                "value": 595,
                "textStyle": {
                    "color": "rgb(76,83,42)"
                }
            },
            {
                "name": "\u5e72\u561b",
                "value": 485,
                "textStyle": {
                    "color": "rgb(89,135,158)"
                }
            },
            {
                "name": "\u7761\u89c9",
                "value": 347,
                "textStyle": {
                    "color": "rgb(41,139,81)"
                }
            },
            {
                "name": "\u5c0f\u59d0\u59d0",
                "value": 332,
                "textStyle": {
                    "color": "rgb(17,105,10)"
                }
            },
            {
                "name": "\u6253\u6e38\u620f",
                "value": 321,
                "textStyle": {
                    "color": "rgb(133,134,152)"
                }
            },
            {
                "name": "\u7ffb\u767d\u773c",
                "value": 318,
                "textStyle": {
                    "color": "rgb(81,36,50)"
                }
            },
            {
                "name": "\u4e1c\u897f",
                "value": 292,
                "textStyle": {
                    "color": "rgb(127,102,137)"
                }
            },
            {
                "name": "\u76b1\u7709",
                "value": 289,
                "textStyle": {
                    "color": "rgb(128,7,16)"
                }
            },
            {
                "name": "\u5b66\u6821",
                "value": 260,
                "textStyle": {
                    "color": "rgb(57,6,95)"
                }
            },
            {
                "name": "\u665a\u4e0a",
                "value": 249,
                "textStyle": {
                    "color": "rgb(40,139,23)"
                }
            },
            {
                "name": "\u624b\u673a",
                "value": 237,
                "textStyle": {
                    "color": "rgb(121,76,63)"
                }
            },
            {
                "name": "\u89c6\u9891",
                "value": 235,
                "textStyle": {
                    "color": "rgb(54,6,56)"
                }
            },
            {
                "name": "\u4e3a\u5565",
                "value": 230,
                "textStyle": {
                    "color": "rgb(104,149,87)"
                }
            },
            {
                "name": "\u4e0d\u597d",
                "value": 229,
                "textStyle": {
                    "color": "rgb(72,149,66)"
                }
            },
            {
                "name": "\u597d\u770b",
                "value": 222,
                "textStyle": {
                    "color": "rgb(94,111,64)"
                }
            },
            {
                "name": "\u4e0d\u7528",
                "value": 208,
                "textStyle": {
                    "color": "rgb(8,29,36)"
                }
            },
            {
                "name": "\u8bf4\u8bdd",
                "value": 208,
                "textStyle": {
                    "color": "rgb(128,120,30)"
                }
            },
            {
                "name": "\u8001\u5e08",
                "value": 207,
                "textStyle": {
                    "color": "rgb(46,79,17)"
                }
            },
            {
                "name": "\u4e0d\u60f3",
                "value": 200,
                "textStyle": {
                    "color": "rgb(148,42,93)"
                }
            },
            {
                "name": "\u54c8\u54c8\u54c8",
                "value": 197,
                "textStyle": {
                    "color": "rgb(32,3,58)"
                }
            },
            {
                "name": "Emm",
                "value": 194,
                "textStyle": {
                    "color": "rgb(44,10,131)"
                }
            },
            {
                "name": "\u5b66\u4e60",
                "value": 191,
                "textStyle": {
                    "color": "rgb(139,110,146)"
                }
            },
            {
                "name": "\u53ed\u53ed",
                "value": 189,
                "textStyle": {
                    "color": "rgb(119,27,134)"
                }
            },
            {
                "name": "\u771f\u7684",
                "value": 181,
                "textStyle": {
                    "color": "rgb(149,72,147)"
                }
            },
            {
                "name": "\u5bbf\u820d",
                "value": 180,
                "textStyle": {
                    "color": "rgb(9,25,140)"
                }
            },
            {
                "name": "\u611f\u89c9",
                "value": 175,
                "textStyle": {
                    "color": "rgb(159,46,157)"
                }
            },
            {
                "name": "\u4e24\u4e2a",
                "value": 163,
                "textStyle": {
                    "color": "rgb(46,121,155)"
                }
            },
            {
                "name": "\u7535\u8111",
                "value": 163,
                "textStyle": {
                    "color": "rgb(125,150,61)"
                }
            },
            {
                "name": "\u54e5\u54e5",
                "value": 150,
                "textStyle": {
                    "color": "rgb(32,33,85)"
                }
            },
            {
                "name": "\u8fd9\u662f",
                "value": 149,
                "textStyle": {
                    "color": "rgb(5,137,83)"
                }
            },
            {
                "name": "\u8003\u8bd5",
                "value": 149,
                "textStyle": {
                    "color": "rgb(39,157,80)"
                }
            },
            {
                "name": "\u4e0d\u884c",
                "value": 147,
                "textStyle": {
                    "color": "rgb(86,59,35)"
                }
            },
            {
                "name": "\u76f4\u64ad",
                "value": 147,
                "textStyle": {
                    "color": "rgb(141,117,140)"
                }
            },
            {
                "name": "\u4f60\u597d",
                "value": 147,
                "textStyle": {
                    "color": "rgb(136,56,81)"
                }
            },
            {
                "name": "\u5565\u65f6\u5019",
                "value": 146,
                "textStyle": {
                    "color": "rgb(137,49,12)"
                }
            },
            {
                "name": "\u4fe1\u606f",
                "value": 145,
                "textStyle": {
                    "color": "rgb(56,144,53)"
                }
            },
            {
                "name": "\u4e0d\u8ba9",
                "value": 145,
                "textStyle": {
                    "color": "rgb(97,124,43)"
                }
            },
            {
                "name": "\u53f9\u6c14",
                "value": 144,
                "textStyle": {
                    "color": "rgb(15,135,32)"
                }
            },
            {
                "name": "\u53cd\u6b63",
                "value": 141,
                "textStyle": {
                    "color": "rgb(7,110,125)"
                }
            },
            {
                "name": "\u5e94\u8be5",
                "value": 141,
                "textStyle": {
                    "color": "rgb(127,89,143)"
                }
            },
            {
                "name": "\u4e0a\u8bfe",
                "value": 131,
                "textStyle": {
                    "color": "rgb(72,59,147)"
                }
            },
            {
                "name": "\u5403\u996d",
                "value": 126,
                "textStyle": {
                    "color": "rgb(27,23,45)"
                }
            },
            {
                "name": "\u70df\u82b1",
                "value": 123,
                "textStyle": {
                    "color": "rgb(57,78,148)"
                }
            },
            {
                "name": "\u5fae\u4fe1",
                "value": 122,
                "textStyle": {
                    "color": "rgb(17,142,122)"
                }
            },
            {
                "name": "\u8eab\u4f53",
                "value": 119,
                "textStyle": {
                    "color": "rgb(134,16,75)"
                }
            },
            {
                "name": "\u5e73\u677f",
                "value": 118,
                "textStyle": {
                    "color": "rgb(149,123,4)"
                }
            },
            {
                "name": "\u5fae\u7b11",
                "value": 118,
                "textStyle": {
                    "color": "rgb(1,69,86)"
                }
            },
            {
                "name": "\u4e0d\u5230",
                "value": 116,
                "textStyle": {
                    "color": "rgb(83,102,15)"
                }
            },
            {
                "name": "\u54c8\u54c8\u54c8\u54c8",
                "value": 115,
                "textStyle": {
                    "color": "rgb(97,118,136)"
                }
            },
            {
                "name": "\u771f\u4e0d\u9519",
                "value": 113,
                "textStyle": {
                    "color": "rgb(124,87,117)"
                }
            },
            {
                "name": "\u5367\u69fd",
                "value": 111,
                "textStyle": {
                    "color": "rgb(12,67,16)"
                }
            },
            {
                "name": "\u7591\u95ee",
                "value": 111,
                "textStyle": {
                    "color": "rgb(33,12,22)"
                }
            },
            {
                "name": "\u4e0d\u9519",
                "value": 109,
                "textStyle": {
                    "color": "rgb(10,69,101)"
                }
            },
            {
                "name": "\u65f6\u95f4",
                "value": 109,
                "textStyle": {
                    "color": "rgb(44,125,71)"
                }
            },
            {
                "name": "\u51e0\u4e2a",
                "value": 109,
                "textStyle": {
                    "color": "rgb(52,15,132)"
                }
            },
            {
                "name": "\u544a\u8bc9",
                "value": 109,
                "textStyle": {
                    "color": "rgb(58,86,27)"
                }
            },
            {
                "name": "\u6709\u4eba",
                "value": 108,
                "textStyle": {
                    "color": "rgb(46,154,10)"
                }
            },
            {
                "name": "\u53ef\u60dc",
                "value": 108,
                "textStyle": {
                    "color": "rgb(10,3,150)"
                }
            },
            {
                "name": "\u597d\u597d",
                "value": 107,
                "textStyle": {
                    "color": "rgb(94,37,48)"
                }
            },
            {
                "name": "\u660e\u5929",
                "value": 105,
                "textStyle": {
                    "color": "rgb(3,132,104)"
                }
            },
            {
                "name": "\u88ab\u7a9d",
                "value": 105,
                "textStyle": {
                    "color": "rgb(45,29,24)"
                }
            },
            {
                "name": "\u6d41\u6c13",
                "value": 105,
                "textStyle": {
                    "color": "rgb(137,113,20)"
                }
            },
            {
                "name": "\u5567\u5567",
                "value": 104,
                "textStyle": {
                    "color": "rgb(53,95,11)"
                }
            },
            {
                "name": "\u6e38\u620f",
                "value": 104,
                "textStyle": {
                    "color": "rgb(63,44,54)"
                }
            },
            {
                "name": "python",
                "value": 104,
                "textStyle": {
                    "color": "rgb(83,105,126)"
                }
            },
            {
                "name": "\u56de\u5bb6",
                "value": 102,
                "textStyle": {
                    "color": "rgb(156,6,114)"
                }
            },
            {
                "name": "\u6709\u6ca1\u6709",
                "value": 102,
                "textStyle": {
                    "color": "rgb(86,17,13)"
                }
            },
            {
                "name": "\u706b\u9505",
                "value": 102,
                "textStyle": {
                    "color": "rgb(37,95,36)"
                }
            },
            {
                "name": "\u6296\u97f3",
                "value": 101,
                "textStyle": {
                    "color": "rgb(146,118,156)"
                }
            },
            {
                "name": "\u6628\u5929",
                "value": 101,
                "textStyle": {
                    "color": "rgb(123,12,115)"
                }
            },
            {
                "name": "\u6ca1\u4e8b",
                "value": 101,
                "textStyle": {
                    "color": "rgb(120,74,128)"
                }
            },
            {
                "name": "\u4f5c\u4e1a",
                "value": 101,
                "textStyle": {
                    "color": "rgb(132,91,14)"
                }
            },
            {
                "name": "\u5173\u7cfb",
                "value": 100,
                "textStyle": {
                    "color": "rgb(12,15,81)"
                }
            },
            {
                "name": "\u5976\u5976",
                "value": 99,
                "textStyle": {
                    "color": "rgb(97,94,5)"
                }
            },
            {
                "name": "\u80af\u5b9a",
                "value": 99,
                "textStyle": {
                    "color": "rgb(117,34,87)"
                }
            },
            {
                "name": "\u521a\u521a",
                "value": 97,
                "textStyle": {
                    "color": "rgb(111,12,59)"
                }
            },
            {
                "name": "ng",
                "value": 95,
                "textStyle": {
                    "color": "rgb(104,32,12)"
                }
            },
            {
                "name": "\u5feb\u4e50",
                "value": 93,
                "textStyle": {
                    "color": "rgb(9,12,145)"
                }
            },
            {
                "name": "\u4e13\u4e1a",
                "value": 92,
                "textStyle": {
                    "color": "rgb(53,87,98)"
                }
            },
            {
                "name": "\u4e00\u70b9",
                "value": 92,
                "textStyle": {
                    "color": "rgb(96,76,141)"
                }
            },
            {
                "name": "\u4e0b\u5348",
                "value": 90,
                "textStyle": {
                    "color": "rgb(121,137,2)"
                }
            },
            {
                "name": "\u806a\u660e",
                "value": 87,
                "textStyle": {
                    "color": "rgb(9,128,124)"
                }
            },
            {
                "name": "\u7406\u89e3",
                "value": 87,
                "textStyle": {
                    "color": "rgb(91,35,29)"
                }
            },
            {
                "name": "QQ",
                "value": 87,
                "textStyle": {
                    "color": "rgb(54,120,86)"
                }
            },
            {
                "name": "\u53d1\u73b0",
                "value": 87,
                "textStyle": {
                    "color": "rgb(67,144,78)"
                }
            },
            {
                "name": "\u8868\u60c5",
                "value": 86,
                "textStyle": {
                    "color": "rgb(101,24,139)"
                }
            },
            {
                "name": "\u8fd9\u4f1a",
                "value": 86,
                "textStyle": {
                    "color": "rgb(143,85,158)"
                }
            },
            {
                "name": "\u4e0b\u8f7d",
                "value": 86,
                "textStyle": {
                    "color": "rgb(85,24,16)"
                }
            },
            {
                "name": "\u71ac\u591c",
                "value": 84,
                "textStyle": {
                    "color": "rgb(63,79,0)"
                }
            },
            {
                "name": "\u95ed\u5634",
                "value": 83,
                "textStyle": {
                    "color": "rgb(66,95,144)"
                }
            },
            {
                "name": "\u672c\u6765",
                "value": 81,
                "textStyle": {
                    "color": "rgb(116,91,97)"
                }
            },
            {
                "name": "\u5c0f\u65f6",
                "value": 80,
                "textStyle": {
                    "color": "rgb(90,116,11)"
                }
            },
            {
                "name": "\u660e\u767d",
                "value": 80,
                "textStyle": {
                    "color": "rgb(35,58,65)"
                }
            },
            {
                "name": "\u597d\u50cf",
                "value": 79,
                "textStyle": {
                    "color": "rgb(158,136,137)"
                }
            },
            {
                "name": "\u670b\u53cb",
                "value": 79,
                "textStyle": {
                    "color": "rgb(52,136,41)"
                }
            },
            {
                "name": "\u60f3\u8981",
                "value": 79,
                "textStyle": {
                    "color": "rgb(94,108,86)"
                }
            },
            {
                "name": "\u5929\u5929",
                "value": 78,
                "textStyle": {
                    "color": "rgb(133,132,72)"
                }
            },
            {
                "name": "\u4e00\u5929\u5929",
                "value": 77,
                "textStyle": {
                    "color": "rgb(123,6,87)"
                }
            },
            {
                "name": "\u65fa\u67f4",
                "value": 76,
                "textStyle": {
                    "color": "rgb(39,153,153)"
                }
            },
            {
                "name": "\u6162\u6162",
                "value": 76,
                "textStyle": {
                    "color": "rgb(54,77,155)"
                }
            }
        ],
        "drawOutOfBound": false,
        "textStyle": {
            "emphasis": {}
        }
    }
],
"legend": [
    {
        "data": [],
        "selected": {},
        "show": false,
        "padding": 5,
        "itemGap": 10,
        "itemWidth": 25,
        "itemHeight": 14,
        "backgroundColor": "transparent",
        "borderColor": "#ccc",
        "borderWidth": 1,
        "borderRadius": 0,
        "pageButtonItemGap": 5,
        "pageButtonPosition": "end",
        "pageFormatter": "{current}/{total}",
        "pageIconColor": "#2f4554",
        "pageIconInactiveColor": "#aaa",
        "pageIconSize": 15,
        "animationDurationUpdate": 800,
        "selector": false,
        "selectorPosition": "auto",
        "selectorItemGap": 7,
        "selectorButtonGap": 10
    }
],
"tooltip": {
    "show": true,
    "trigger": "item",
    "triggerOn": "mousemove|click",
    "axisPointer": {
        "type": "line"
    },
    "showContent": true,
    "alwaysShowContent": false,
    "showDelay": 0,
    "hideDelay": 100,
    "enterable": false,
    "confine": false,
    "appendToBody": false,
    "transitionDuration": 0.4,
    "textStyle": {
        "fontSize": 14
    },
    "borderWidth": 0,
    "padding": 5,
    "order": "seriesAsc"
},
"title": [
]
};
    // 获取屏幕宽度
    const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 根据屏幕宽度设置字体范围
    let fontSizeRange;
    if (screenWidth < 768) { // 手机屏幕
        fontSizeRange = [5, 40];
    } else { // 电脑屏幕
        fontSizeRange = [10, 100];
    }
    console.info(fontSizeRange);
    option_f2411bf4425d4ac9b2e83df1a4fa982f.series[0].sizeRange = fontSizeRange;
    chart_f2411bf4425d4ac9b2e83df1a4fa982f.setOption(option_f2411bf4425d4ac9b2e83df1a4fa982f);























</script>
<script>
    $(document).ready(function() {
      $('#fullpage').fullpage();
    });
  </script>
  <script type="text/javascript"> function getRTime() {
    var tt = document.getElementById("first_time").innerText;
    var EndTime = new Date(tt);
    var NowTime = new Date();
    var t = NowTime.getTime()-EndTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
    document.getElementById("t_d").innerHTML = d + " 天";
    document.getElementById("t_h").innerHTML = h + " 时";
    document.getElementById("t_m").innerHTML = m + " 分";
    document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);

</script>
<script>
    var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
        document.getElementById('calendar-chart'), 'white', {renderer: 'canvas'});
    var option_51ebd4312946429e9c32b2b55b96a479 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"aria": {
    "enabled": false
},
"color": [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc"
],
"series": [
    {
        "type": "heatmap",
        "coordinateSystem": "calendar",
        "data": [
            [
                "2022-01-01",
                103
            ],
            [
                "2022-01-03",
                95
            ],
            [
                "2022-01-04",
                196
            ],
            [
                "2022-01-05",
                162
            ],
            [
                "2022-01-06",
                203
            ],
            [
                "2022-01-07",
                44
            ],
            [
                "2022-01-08",
                96
            ],
            [
                "2022-01-09",
                137
            ],
            [
                "2022-01-10",
                105
            ],
            [
                "2022-01-11",
                173
            ],
            [
                "2022-01-12",
                268
            ],
            [
                "2022-01-13",
                75
            ],
            [
                "2022-01-14",
                514
            ],
            [
                "2022-01-15",
                215
            ],
            [
                "2022-01-16",
                221
            ],
            [
                "2022-01-17",
                221
            ],
            [
                "2022-01-18",
                146
            ],
            [
                "2022-01-19",
                163
            ],
            [
                "2022-01-20",
                18
            ],
            [
                "2022-01-21",
                313
            ],
            [
                "2022-01-22",
                229
            ],
            [
                "2022-01-23",
                228
            ],
            [
                "2022-01-24",
                503
            ],
            [
                "2022-01-25",
                96
            ],
            [
                "2022-01-26",
                54
            ],
            [
                "2022-01-27",
                28
            ],
            [
                "2022-01-28",
                48
            ],
            [
                "2022-01-29",
                210
            ],
            [
                "2022-01-30",
                147
            ],
            [
                "2022-01-31",
                59
            ],
            [
                "2022-02-01",
                376
            ],
            [
                "2022-02-02",
                335
            ],
            [
                "2022-02-03",
                719
            ],
            [
                "2022-02-04",
                75
            ],
            [
                "2022-02-05",
                239
            ],
            [
                "2022-02-06",
                526
            ],
            [
                "2022-02-07",
                412
            ],
            [
                "2022-02-08",
                215
            ],
            [
                "2022-02-09",
                528
            ],
            [
                "2022-02-10",
                58
            ],
            [
                "2022-02-11",
                268
            ],
            [
                "2022-02-12",
                181
            ],
            [
                "2022-02-13",
                135
            ],
            [
                "2022-02-14",
                42
            ],
            [
                "2022-02-15",
                72
            ],
            [
                "2022-02-16",
                309
            ],
            [
                "2022-02-17",
                290
            ],
            [
                "2022-02-18",
                348
            ],
            [
                "2022-02-19",
                181
            ],
            [
                "2022-02-20",
                330
            ],
            [
                "2022-02-21",
                57
            ],
            [
                "2022-02-22",
                55
            ],
            [
                "2022-02-24",
                354
            ],
            [
                "2022-02-25",
                43
            ],
            [
                "2022-02-26",
                178
            ],
            [
                "2022-02-27",
                32
            ],
            [
                "2022-03-07",
                102
            ],
            [
                "2022-03-08",
                214
            ],
            [
                "2022-03-09",
                51
            ],
            [
                "2022-03-10",
                31
            ],
            [
                "2022-03-11",
                64
            ],
            [
                "2022-03-12",
                177
            ],
            [
                "2022-03-13",
                14
            ],
            [
                "2022-03-14",
                100
            ],
            [
                "2022-03-15",
                95
            ],
            [
                "2022-03-16",
                195
            ],
            [
                "2022-03-17",
                33
            ],
            [
                "2022-03-18",
                146
            ],
            [
                "2022-03-19",
                100
            ],
            [
                "2022-03-20",
                386
            ],
            [
                "2022-03-21",
                19
            ],
            [
                "2022-03-22",
                172
            ],
            [
                "2022-03-23",
                95
            ],
            [
                "2022-03-24",
                193
            ],
            [
                "2022-03-25",
                194
            ],
            [
                "2022-03-26",
                466
            ],
            [
                "2022-03-27",
                348
            ],
            [
                "2022-03-28",
                137
            ],
            [
                "2022-03-29",
                410
            ],
            [
                "2022-03-30",
                118
            ],
            [
                "2022-03-31",
                596
            ],
            [
                "2022-04-01",
                308
            ],
            [
                "2022-04-02",
                216
            ],
            [
                "2022-04-03",
                111
            ],
            [
                "2022-04-04",
                130
            ],
            [
                "2022-04-05",
                108
            ],
            [
                "2022-04-06",
                111
            ],
            [
                "2022-04-07",
                386
            ],
            [
                "2022-04-08",
                226
            ],
            [
                "2022-04-09",
                292
            ],
            [
                "2022-04-10",
                414
            ],
            [
                "2022-04-11",
                260
            ],
            [
                "2022-04-12",
                402
            ],
            [
                "2022-04-13",
                917
            ],
            [
                "2022-04-14",
                223
            ],
            [
                "2022-04-15",
                352
            ],
            [
                "2022-04-16",
                91
            ],
            [
                "2022-04-17",
                310
            ],
            [
                "2022-04-18",
                524
            ],
            [
                "2022-04-19",
                530
            ],
            [
                "2022-04-20",
                261
            ],
            [
                "2022-04-21",
                316
            ],
            [
                "2022-04-22",
                363
            ],
            [
                "2022-04-23",
                436
            ],
            [
                "2022-04-24",
                382
            ],
            [
                "2022-04-25",
                288
            ],
            [
                "2022-04-26",
                466
            ],
            [
                "2022-04-27",
                196
            ],
            [
                "2022-04-28",
                227
            ],
            [
                "2022-04-29",
                52
            ],
            [
                "2022-04-30",
                215
            ],
            [
                "2022-05-01",
                166
            ],
            [
                "2022-05-02",
                872
            ],
            [
                "2022-05-03",
                156
            ],
            [
                "2022-05-04",
                303
            ],
            [
                "2022-05-05",
                228
            ],
            [
                "2022-05-06",
                317
            ],
            [
                "2022-05-07",
                79
            ],
            [
                "2022-05-08",
                18
            ],
            [
                "2022-07-17",
                14
            ],
            [
                "2022-07-18",
                5
            ],
            [
                "2022-07-19",
                12
            ],
            [
                "2022-07-20",
                30
            ],
            [
                "2022-07-21",
                141
            ],
            [
                "2022-07-22",
                374
            ],
            [
                "2022-07-23",
                66
            ],
            [
                "2022-07-24",
                53
            ],
            [
                "2022-07-25",
                22
            ],
            [
                "2022-07-26",
                131
            ],
            [
                "2022-07-27",
                80
            ],
            [
                "2022-07-28",
                273
            ],
            [
                "2022-07-29",
                130
            ],
            [
                "2022-07-30",
                235
            ],
            [
                "2022-07-31",
                251
            ],
            [
                "2022-08-01",
                111
            ],
            [
                "2022-08-02",
                174
            ],
            [
                "2022-08-03",
                109
            ],
            [
                "2022-08-04",
                382
            ],
            [
                "2022-08-05",
                305
            ],
            [
                "2022-08-06",
                54
            ],
            [
                "2022-08-07",
                120
            ],
            [
                "2022-08-08",
                72
            ],
            [
                "2022-08-09",
                727
            ],
            [
                "2022-08-10",
                48
            ],
            [
                "2022-08-11",
                343
            ],
            [
                "2022-08-12",
                153
            ],
            [
                "2022-08-13",
                105
            ],
            [
                "2022-08-14",
                326
            ],
            [
                "2022-08-15",
                564
            ],
            [
                "2022-08-16",
                464
            ],
            [
                "2022-08-17",
                187
            ],
            [
                "2022-08-18",
                2294
            ],
            [
                "2022-08-19",
                615
            ],
            [
                "2022-08-20",
                432
            ],
            [
                "2022-08-21",
                312
            ],
            [
                "2022-08-22",
                434
            ],
            [
                "2022-08-23",
                5
            ],
            [
                "2022-08-24",
                503
            ],
            [
                "2022-08-25",
                80
            ],
            [
                "2022-08-26",
                1095
            ],
            [
                "2022-08-27",
                15
            ],
            [
                "2022-08-28",
                583
            ],
            [
                "2022-08-29",
                462
            ],
            [
                "2022-08-30",
                324
            ],
            [
                "2022-08-31",
                231
            ],
            [
                "2022-09-01",
                190
            ],
            [
                "2022-09-02",
                602
            ],
            [
                "2022-09-03",
                327
            ],
            [
                "2022-09-04",
                374
            ],
            [
                "2022-09-05",
                433
            ],
            [
                "2022-09-06",
                147
            ],
            [
                "2022-09-07",
                264
            ],
            [
                "2022-09-08",
                649
            ],
            [
                "2022-09-09",
                353
            ],
            [
                "2022-09-10",
                245
            ],
            [
                "2022-09-11",
                264
            ],
            [
                "2022-09-12",
                321
            ],
            [
                "2022-09-13",
                334
            ],
            [
                "2022-09-14",
                92
            ],
            [
                "2022-09-15",
                200
            ],
            [
                "2022-09-16",
                121
            ],
            [
                "2022-09-17",
                78
            ],
            [
                "2022-09-18",
                211
            ],
            [
                "2022-09-19",
                234
            ],
            [
                "2022-09-20",
                228
            ],
            [
                "2022-09-21",
                323
            ],
            [
                "2022-09-22",
                441
            ],
            [
                "2022-09-23",
                331
            ],
            [
                "2022-09-24",
                96
            ],
            [
                "2022-09-25",
                24
            ],
            [
                "2022-09-26",
                58
            ],
            [
                "2022-09-27",
                100
            ],
            [
                "2022-09-28",
                240
            ],
            [
                "2022-09-29",
                264
            ],
            [
                "2022-09-30",
                122
            ],
            [
                "2022-10-01",
                255
            ],
            [
                "2022-10-02",
                71
            ],
            [
                "2022-10-03",
                11
            ],
            [
                "2022-10-04",
                289
            ],
            [
                "2022-10-05",
                201
            ],
            [
                "2022-10-06",
                95
            ],
            [
                "2022-10-07",
                67
            ],
            [
                "2022-10-08",
                61
            ],
            [
                "2022-10-09",
                328
            ],
            [
                "2022-10-10",
                175
            ],
            [
                "2022-10-11",
                482
            ],
            [
                "2022-10-12",
                335
            ],
            [
                "2022-10-13",
                132
            ],
            [
                "2022-10-14",
                72
            ],
            [
                "2022-10-15",
                14
            ],
            [
                "2022-10-16",
                9
            ],
            [
                "2022-10-17",
                21
            ],
            [
                "2022-10-18",
                94
            ],
            [
                "2022-10-19",
                3
            ],
            [
                "2022-10-20",
                2
            ],
            [
                "2022-10-21",
                72
            ],
            [
                "2022-10-22",
                141
            ],
            [
                "2022-10-23",
                26
            ],
            [
                "2022-10-24",
                19
            ],
            [
                "2022-10-25",
                184
            ],
            [
                "2022-10-26",
                71
            ],
            [
                "2022-10-27",
                82
            ],
            [
                "2022-10-28",
                201
            ],
            [
                "2022-10-29",
                203
            ],
            [
                "2022-10-30",
                35
            ],
            [
                "2022-10-31",
                187
            ],
            [
                "2022-11-01",
                122
            ],
            [
                "2022-11-02",
                43
            ],
            [
                "2022-12-07",
                1
            ],
            [
                "2022-12-31",
                15
            ]
        ],
        "label": {
            "show": false,
            "position": "inside",
            "margin": 8
        }
    }
],
"legend": [
],
"tooltip": {
    "show": true,
    "trigger": "item",
    "triggerOn": "mousemove|click",
    "axisPointer": {
        "type": "line"
    },
    "showContent": true,
    "alwaysShowContent": false,
    "showDelay": 0,
    "hideDelay": 100,
    "enterable": false,
    "confine": false,
    "appendToBody": false,
    "transitionDuration": 0.4,
    "textStyle": {
        "fontSize": 14
    },
    "borderWidth": 0,
    "padding": 5,
    "order": "seriesAsc"
},
"calendar": {
    "zlevel": 0,
    "z": 2,
    "width": "auto",
    "orient": "horizontal",
    "range": "2022",
    "cellSize": 10,
    "silent": false
},
"title": [
],
"visualMap": {
    "show": true,
    "type": "continuous",
    "min": 1,
    "max": 2294,
    "inRange": {
        "color": [
            "#50a3ba",
            "#eac763",
            "#d94e5d"
        ]
    },
    "calculable": true,
    "inverse": false,
    "splitNumber": 5,
    "hoverLink": true,
    "orient": "horizontal",
    "left": "0px",
    "bottom": "0px",
    "padding": 5,
    "showLabel": true,
    "itemWidth": 20,
    "itemHeight": 140,
    "borderWidth": 0
}
};
    // 根据屏幕宽度设置字体范围
    let cellSize;
    if (screenWidth < 768) { // 手机屏幕
        option_51ebd4312946429e9c32b2b55b96a479.calendar.cellSize = 10;
    } else { // 电脑屏幕
        option_51ebd4312946429e9c32b2b55b96a479.calendar.cellSize = 15;
    }
    
    chart_51ebd4312946429e9c32b2b55b96a479.setOption(option_51ebd4312946429e9c32b2b55b96a479);
</script>
</body>
</html>
